<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/user/css/animate.css">
    <link rel="stylesheet" href="/user/css/iconfont.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/magnific-popup.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/user/css/bootsnav2.css">
    <link rel="stylesheet" href="/user/css/style.css">
    <link rel="stylesheet" href="/user/css/responsive.css"/>
    <link rel="stylesheet" href="/user/css/alipay.css">
    <link rel="shortcut icon" th:href="@{/user/img/favicon.png}"/>
    <link th:href="@{//www.layuicdn.com/layui-v2.5.4/css/layui.css}" rel="stylesheet" media="all"/>
    <link rel="stylesheet" href="/user/css/global.css"/>
    <script>
        (function (h, o, t, j, a, r) {
            h.hj = h.hj || function () {
                (h.hj.q = h.hj.q || []).push(arguments)
            };
            h._hjSettings = {hjid: 734009, hjsv: 6};
            a = o.getElementsByTagName('head')[0];
            r = o.createElement('script');
            r.async = 1;
            r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
            a.appendChild(r);
        })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
    </script>
</head>
<body data-spy="scroll" data-target=".navbar-collapse" style="background:#f1f2f7">
<header id="header" class="header" style="border-radius: 85px;">
    <div class="navbar-container">
        <a href="/index" class="navbar-logo">
            <img th:src="@{/user/img/logo.png}" alt="首页" style="border-radius: 30px;"/>
        </a>
        <a th:class="'layui-btn layui-btn-radius layui-btn-'+${commons.rand_layui_class()} +' layui-btn-'+${commons.rand_layui_class_size()}"
           th:href="${commons.site_url('/question/1')}">问答</a><span class="layui-badge-dot"></span>
        <a th:class="'layui-btn layui-btn-radius layui-btn-'+${commons.rand_layui_class()} +' layui-btn-'+${commons.rand_layui_class_size()}"
           th:href="${commons.site_url('/graduate_category')}">毕设分类</a>
        <a th:class="'layui-btn layui-btn-radius layui-btn-'+${commons.rand_layui_class()} +' layui-btn-'+${commons.rand_layui_class_size()}"
           th:href="${commons.site_url('/archives')}">所有毕设</a>
        <a th:class="'layui-btn layui-btn-radius layui-btn-'+${commons.rand_layui_class()} +' layui-btn-'+${commons.rand_layui_class_size()}"
           th:href="${commons.site_url('/timeLine')}">时间线</a>
        <a th:class="'layui-btn layui-btn-radius layui-btn-'+${commons.rand_layui_class()} +' layui-btn-'+${commons.rand_layui_class_size()}"
           th:href="${commons.site_url('/learnCode')}">资源库</a>
        <a th:class="'layui-btn layui-btn-radius layui-btn-'+${commons.rand_layui_class()} +' layui-btn-'+${commons.rand_layui_class_size()}"
           th:href="${commons.site_url('/links')}">友链</a>
        <a th:class="'layui-btn layui-btn-radius layui-btn-'+${commons.rand_layui_class()} +' layui-btn-'+${commons.rand_layui_class_size()}"
           th:href="${commons.site_url('/about')}">关于</a>
    </div>
</header>
<div class="culmn">
    <!--Featured Section-->
    <section id="features" class="features">
        <div class="container">
            <div class="row">
                <div class="main_features p-top-100">

                    <div class="gray-box">
                        <div class="title">
                            <h2>菜鸟毕设收银台</h2>
                        </div>
                        <!--内容-->
                        <div>
                            <div class="box-inner order-info">
                                <p class="payment-detail">扫一扫付款（元）</p>
                                <p class="payment-money" id="money1"></p>
                                <div id="qr-pic" class="img-box" style="flex-direction: column;">
                                    <div class="explain">
                                        <img class="fn-left"
                                             src="https://t.alipayobjects.com/image/T1bdtfXfdiXXXXXXXX.png"
                                             alt="扫一扫标识">
                                        <div class="fn-right" style="margin-top: 10px;">打开手机支付宝<br>扫一扫继续付款</div>
                                    </div>
                                    <div class="timeout" style="display: none">二维码已过期</div>
                                </div>
                                <div class="download-box">
                                    <p id="qrmobile"
                                       style="display: none;margin: 10px 10px -10px 10px;text-align: center;">
                                        <span>请长按二维码保存至手机后，打开支付宝使用“扫一扫”，点击右上角“相册”选择刚保存的二维码进行支付</span>
                                    </p>
                                    <a id="startApp" class="main-btn"
                                       style="width: 205px;display: none;margin-top: 20px;">一键启动支付宝APP支付</a>
                                    <a id="startAppFromWechat" onclick="showTip()" class="main-btn"
                                       style="width: 205px;display: none;margin-top: 20px;">打开支付宝APP支付</a>
                                    <a class="download-alipay" href="https://mobile.alipay.com/index.htm"
                                       target="_blank">首次使用请下载手机支付宝</a>
                                </div>

                                <div class="count" id="time-box"></div>

                                <div class="qrguide-area">
                                    <img id="img1"
                                         src="https://t.alipayobjects.com/image/rmsweb/T13CpgXf8mXXXXXXXX.png"
                                         class="show" onclick="change()">
                                    <img id="img2"
                                         src="https://t.alipayobjects.com/image/rmsweb/T1ASFgXdtnXXXXXXXX.png"
                                         class="hide" onclick="change()">
                                </div>

                            </div>
                        </div>

                        <div>
                            <div class="box-inner">
                                <div>
                                    <em><span>¥</span><em id="money2"></em></em>
                                    <input type="text" class="disabled-btn" onclick="confirm()" id="confirm"
                                           value="等待支付..." readonly>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div><!-- End off row -->
        </div><!-- End off container -->
    </section><!-- End off Featured Section-->
    <!--<div class="modal fade" id="msgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body" id="msgBody">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-warning" type="button" onclick="toThanks()">确 认</button>
                </div>
            </div>
        </div>
    </div>-->

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.compatibility.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.jquery.min.js"></script>
<script src="/user/js/qrcode.min.js"></script>
<script src="/user/js/jquery.collapse.js"></script>
<script src="/user/js/bootsnav.js"></script>
<script src="/user/js/plugins.js"></script>
<script src="/user/js/main.js"></script>
<script src="/user/js/jquery.cookie.js"></script>
<script src="https://www.layuicdn.com/layui-v2.5.4/layui.all.js" charset="utf-8"></script>
</body>
<script th:inline="javascript">

    $("[data-toggle='popover']").popover();
    var money = $.cookie('money');
    if (money == "" || money == null) {
        window.location.href = "/";
    }
    var title = $.cookie('title');
    $(".gray-box .title").append(title);
    $.cookie('scanned', "0");

    // 判断移动设备
    function isMobile() {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            return 1;
        }
        return 0;
    }

    if (isMobile()) {
        $("#redmobile").css('display', 'block');
        $("#qrmobile").css('display', 'block');
        $("#other-way").css('display', 'none');
    }

    // 判断是否微信浏览器
    function isWeixin() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            return 1;
        }
        return 0;
    }

    // 判断是否安卓QQ浏览器
    function isQQAndroid() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/QQ/i) == 'qq' && ua.match(/Android/i) == 'android') {
            return 1;
        }
        return 0;
    }

    var url = $.cookie("qrCode");

    if (isMobile() && !isWeixin() && !isQQAndroid()) {
        // 手机端且不是微信浏览器且不是安卓QQ时支持一键打开支付宝
        $("#qrmobile").css("display", "none");
        $("#startApp").css("display", "block");

        $("#startApp").attr("href", url);
    }

    $("#money1").html(Number(money).toFixed(2));
    $("#money2").html(Number(money).toFixed(2));

    var qrcode = new QRCode(document.getElementById("qr-pic"), {
        text: url,
        width: 160,
        height: 160
    });

    countDown();
    countTime();

    var flag = true;

    function change() {
        if (flag) {
            $("#img1").removeAttr("class");
            $("#img1").attr("class", "hide");
            $("#img2").removeAttr("class");
            $("#img2").attr("class", "show");
            flag = !flag;
        } else {
            $("#img1").removeAttr("class");
            $("#img1").attr("class", "show");
            $("#img2").removeAttr("class");
            $("#img2").attr("class", "hide");
            flag = !flag;
        }

    }

    // 倒计时
    var count = 300;
    $("#confirm").attr("disabled", "disabled");

    function countDown() {
        if (count == 0) {
            $("#confirm").removeAttr("class");
            $("#confirm").removeAttr("disabled");
            $("#confirm").attr("class", "main-btn");
            $("#confirm").val("确认已支付");
            return;
        } else {
            count--;
        }
        setTimeout(function () {
            countDown();
        }, 1000);
    }

    //倒计时二维码支付时间
    function countTime() {
        var cookietime = $.cookie('time');
        var time = cookietime == 'NaN' ? 120 : cookietime;
        if (time <= 0) {
            document.getElementsByClassName("timeout")[0].style.display = "block";
            $("#time-box").css("display", "none");
            $("#confirm").attr("disabled", "disabled");
            $("#confirm").removeAttr("class");
            $("#confirm").attr("class", "disabled-btn");
            $("#confirm").val("二维码已失效");
            $("#startApp").css("display", "none");
            count = 10000;
            return;
        } else {
            time--;
            showTime(time);
            $.cookie('time', time);
        }
        setTimeout(function () {
            countTime();
        }, 1000)
    }

    function showTime(v) {
        if (v == null || v == "") {
            return "";
        }
        var m = 0, s = 0;
        if (v >= 60) {
            m = Math.floor(v / 60);
            s = v % 60;
        } else {
            s = v;
        }

        if (m >= 0 && m <= 9) {
            m = "0" + m;
        }
        if (s >= 0 && s <= 9) {
            s = "0" + s;
        }
        $("#time-box").html("请于 " + m + " 分 " + s + " 秒 内支付");
    }

    //查询订单支付状态并更新
    judgeState();

    function judgeState() {
        $.ajax({
            url: "/alipay/query/" + $.cookie('payId'),
            type: 'POST',
            success: function (data) {
                if (data.code == '0') {
                    if (data.data == 1) {
                        layer.open({
                            title: '菜鸟毕设',
                            content: "恭喜您已成功支付 " + Number(money).toFixed(2) + " 元" + "请注意查收通知邮件，若长时间未收到请检查垃圾邮件或进行反馈！",
                            time:8000,
                            shade: 0.5,
                            shadeClose:true,
                            end: function(index, layero){
                                layer.msg('请稍等,系统正在派发中·····', {
                                    icon: 16
                                    , shade: 0.5
                                    , time: 3000
                                    , end: function (index) {
                                        window.location.href = "/recharge/paysuccess/"+$.cookie('payId');
                                    }
                                });
                            }
                        });
                    } else {
                        setTimeout(function () {
                            judgeState();
                        }, 1000)
                    }
                } else {
                    setTimeout(function () {
                        judgeState();
                    }, 1000)
                }
            }
        });
    }

    /*function showMsg(m) {
        $("#msgModal").modal('show');
        $("#msgBody").html(m);
    }*/

    function confirm() {
        window.location.href = "/recharge/confirm";
    }
</script>
</html>
